@use "./reset.scss";
@use "./font.scss";
@use "./transition.scss";
@use "./sidebar.scss";
@use "./dark.scss";

.app-container {
  padding: 10px;
}

.search-container {
  padding: 18px 0 0 10px;
  margin-bottom: 10px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}

.table-container > .el-card__header {
  padding: calc(var(--el-card-padding) - 8px) var(--el-card-padding);
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32 160 255);
  }
}
.content-container { 
  border-radius: 4px;
  background-color:var(--container-bg-color);
  transition: all .3s;
  position:relative;
  z-index:1;
  &:hover{
    box-shadow: var(--el-box-shadow-light);
  }
}
.btn-bgc-fff{
  background-color:#ffffff !important;
  border-color:var(--mainColor) !important;
  &:hover{
    background-color:var(--mainColor) !important;
    border-color:var(--mainColor) !important;
  }
}
.level-2-title{
    position:relative;
    color: var(--text-333-color);
    &::before{
        content:'';
        width: 3px;
        height: 14px;
        background:var(--mainColor);
        position:absolute;
        top:26px;
        left: 26px;
    }
}
.table-border{
  border:1px solid #dcdfe6 !important;
  border-bottom:0 !important;
  border-radius: 3px;
  height:400px;
}
.words-item{
    border:1px solid #eeeff4;
    border-radius: 3px;
    overflow: hidden;
    background-color:var(--mainBg);
    &__title{
        height:44px;
        color: var(--title-color);
        
        &>span{
            color: #999;
            font-weight: normal;
        }
        ul{
            display: flex;
            padding:3px 0 0 3px;
            li{
                height: 41px;
                line-height: 39px;
                padding: 0 14px;
                cursor: pointer;
                position:relative;
                white-space: nowrap;
                &.active{
                    color: var(--mainColor);
                    background-color: var(--container-bg-color);
                    border-radius: 3px 3px 0 0;
                    &::after{
                        content: "";
                        position: absolute;
                        bottom: 0px;
                        left: 50%;
                        transform: translateX(-50%);
                        border-left: 5px solid transparent;
                        border-right: 5px solid transparent;
                        border-top: 5px solid var(--mainColor);
                    }
                }
                
            }
        }
    }
    &__list{
        height:400px;
        overflow: hidden;
        background-color: var(--container-bg-color);
        margin: 0 3px 3px 3px;
        border-radius: 3px 3px 0 0;
    }
}
:deep(.el-input__wrapper){
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
    border-bottom:1px solid #eeeff4 !important;
}
.confirm-keywords{
    position:relative;
    &::before{
        content:'';
        width: 3px;
        height: 14px;
        background:var(--mainColor);
        position:absolute;
        top:26px;
        left: 26px;
    }
}
.words-table{
    border:1px solid #efeef3;
    tr{
        th{
            font-size: 14px;
            height:44px;
            background-color:var(--mainBg);
            &:nth-child(3){
                border-right:1px solid #efeef3;
            }
        }
        td{
            font-size: 14px;
            padding:10px 0;
            text-align: center;
            line-height: 1.4;
            &:nth-child(3n){
                border-right:1px solid #efeef3;
            }
        }
    }
}
.box-title{
    .prefix{
        color: var(--mainColor);
    }
    h2{
        font-size: 16px;
        font-weight: bold;
        color: var(--title-color);
    }
}
.customize-message-box{
  padding-bottom:30px !important;
  .el-message-box__title{
    display: none !important;
  }
  .el-message-box__message{
    padding:10px 20px 0;
  }
  .el-message-box__btns{
    padding-top:20px;
  }
}
.steps {
    
    .item {
        font-size: 14px;
        color: #999999;
        margin: 0 10px;
        text-align: center;
        position:relative;

        p {
            b {
                display: inline-block;
                padding: 0 5px;
                font-size: 18px;
                color: #bababa;
            }
        }

        span {
            display: flex;
            width: 163px;
            height: 30px;
            margin-top: 15px;
            justify-content: center;
            align-items: center;
            background: url('@/assets/images/step.png') no-repeat 0 0;
        }

        &.step {
            color: var(--mainColor);

            b {
                color: var(--mainColor);
            }

            span {
                color: #ffffff;
                background: url('@/assets/images/step-active.png') no-repeat 0 0;
            }
            &::after{
                border-color:var(--mainColor);
            }
        }
        &::after{
            content:'';
            position:absolute;
            top:12px;
            right:-60px;
            width: 100px;
            height: 1px;
            border-top:1px dashed #dcdcdc;
        }
        &:last-child{
            &::after{
                display: none;
            }
        }
    }
    
}
.el-form-item--default .el-form-item__label {
    font-weight: 700;
}
.edui-default .edui-editor-iframeholder{
    height: 500px !important;
}
.friendly-tips{
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 12px;
  color: #61a17c;
  background-color:#f2fbf8;
  svg{
    margin-right: 5px;
  }
}
.warning-tips{
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 12px;
  color: #ff2e4d;
  background-color:#ffefef;
  svg{
    margin-right: 5px;
  }
}
.warning-text-tips{
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 12px;
  color: #ff6600;
  svg{
    margin-right: 5px;
  }
}
.upload-image {
    width: 90px;
    height: 90px;
    border-radius: 3px;
    border: 1px solid var(--el-border-color);
    background-color: var(--mainBg);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position:relative;
    .el-upload{
        width:100%;
        height:100%;
    }
    .del{
        color:#666666;
        cursor: pointer;
        position:absolute;
        right:-8px;
        top:-8px;
        z-index: 99;
    }
    .replace{
        color:#666666;
        cursor: pointer;
        position:absolute;
        left:-8px;
        bottom:-8px;
        z-index: 98;
    }
}
.inquiry-list{
    ul{
        margin: 0 16px;
        li{
            padding: 0 0 15px 0;
            img{
                width: 40px;
                height: 40px;
                margin-right: 15px;
                margin-top: 10px;
                border-radius: 50%;
            }
            .inquiry-info{
                flex:1;
                border-radius: 8px;
                background-color: #b6f993;
                padding: 10px 12px;
                position:relative;
                time{
                    font-size: 12px;
                    color: #999;
                }
                p{
                    font-size: 12px;
                    color: #333;
                    line-height: 1.4;
                    margin-top: 8px;
                }
                &::before{
                    content:'';
                    position:absolute;
                    left:-7px;
                    top: 13px;
                    border-top: 7px solid transparent;
                    border-bottom: 7px solid transparent;
                    border-right: 7px solid #b6f993;
                }
            }
        }
    }
}
.dialog-header{
    height: 44px;
    background-color: var(--mainBg);
    margin:-16px -16px 0 -16px;
    padding: 0 14px 0 16px;
    h4{
        font-size: 16px;
        & + span{
            font-size: 12px;
            color: #999999;
            margin-left: 20px;
        }
    }
    svg{
        cursor: pointer;
        color: #666666;
    }
}
.customize-dialog{
    .el-dialog{
        overflow: hidden;
    }
}
.dialog-success-icon{
    color: #0ab76d;
    width: 80px;
    height: 80px;
    margin-bottom:20px;
}
.dialog-warn-icon{
    color: #ff6d34;
    width: 80px;
    height: 80px;
    margin-bottom:20px;
}
.dialog-error-icon{
    color: #f56c6c;
    width: 80px;
    height: 80px;
    margin-bottom:20px;
}
.remind{
    padding:10px 20px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 24px;
    color: #db902d;
    position:relative;
    background-color: #f9f2e2;
    .close{
        position:absolute;
        top:10px;
        right:10px;
        cursor: pointer;
    }
}
.el-popup-parent--hidden{
    width:100% !important;
}
.areas {
    margin-top: 6px;

    p {
        font-size: 12px;
        line-height: 28px;
    }

    ul {
        li {
            font-size: 12px;
            line-height: 26px;
            color: var(--mainColor);
            border: 1px solid var(--mainColor);
            border-radius: 13px;
            padding: 0 12px;
            margin-right: 12px;
            margin-bottom: 6px;
            cursor: pointer;
        }
    }
}

.area-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--title-color);

    &::after {
        content: '';
        width: 5px;
        height: 5px;
        display: inline-block;
        vertical-align: bottom;
        border-radius: 50%;
        background-color: var(--mainColor);
    }

    &+ul {
        li {
            font-size: 14px;
            line-height: 28px;
            cursor: pointer;
            color: var(--title-color);

            &.active {
                color: var(--mainColor);
            }
        }
    }
}
.distillation-table{
    width: 100%;
    color: var(--el-table-text-color);
    tr{
        th{
            padding:8px 12px;
            line-height: 24px;
            font-size: 14px;
            background-color: var(--mainBg);
        }
        td{
            padding:8px 12px;
            line-height: 24px;
            font-size: 14px;
            border-bottom:1px solid #ebeef5;
            text-align: center;
            
        }
    }
}
.custom-input {
    p {
        color: #666666;
        padding-left: 0px;
    }

    .el-input {
        :deep(.el-input__wrapper) {
            box-shadow: none !important;
            transition: all 0.3s;
        }

        &:hover {
            :deep(.el-input__wrapper) {
                box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
                transition: all 0.3s;
            }
        }

    }

    &.active {
        :deep(.el-input__wrapper) {
            box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
        }
    }
}
.word-title {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-top: 10px;
    overflow: hidden;

    svg {
        color: var(--mainColor);
    }

    &+ul {
        margin-bottom: 10px;
        padding-bottom: 10px;
        overflow: hidden;

        li {
            display: flex;
            align-items: center;
            height: 32px;
            font-size: 14px;
            color: #333333;
            padding: 0 12px;
            margin: 12px 12px 0 0;
            border-radius: 4px;
            background-color: var(--mainBg);

            svg {
                color: #999999;
                cursor: pointer;
            }

            &.active {
                text-decoration: line-through;
                color:#888888;
            }
        }
    }
}
.aq-data{
    margin: 0 16px;
    ul{
        li{
            height: 80px;
            border-radius: 6px;
            background-color: #fdf3f3;
            margin-bottom:16px;
            margin-right:16px;
            padding:0 16px 0 16px;
            .icons{
                height: 44px;
                width: 48px;
                text-align: center;
            }
            span{
                font-size: 12px;
                line-height: 1.2;
                color: #999999;
                margin-right:12px;
            }
            p{
                font-size: 26px;
                font-family: 'DIN web';
                font-weight: bold;
            }
            &:nth-child(2){
                background-color: #fff5ed;
            }
            &:nth-child(3){
                background-color: #fff1dd;
                margin-right: 0;
            }
        }
    }
}
.aq-data1{
    margin: 0 16px;
    ul{
        li{
            height: 80px;
            border-radius: 6px;
            background-color: #fdf3f3;
            margin-bottom:16px;
            padding:0 10px 0 16px;
            .icons{
                margin-right: 10px;
                height: 44px;
                width: 48px;
                text-align: center;
            }
            span{
                font-size: 12px;
                line-height: 1.2;
                color: #999999;
                margin-bottom:6px;
            }
            p{
                font-size: 24px;
                font-family: 'DIN web';
                font-weight: bold;
            }
            &:nth-child(2){
                background-color: #fff5ed;
            }
            &:nth-child(3){
                background-color: #fff1dd;
            }
        }
    }
}
.no-img{
    background-color: #f5f7fa;
    font-size: 12px;
    color: #666666;
    margin: 0 auto;
}
.geo-customer {
    width: 100%;
    padding: 16px;
    background-color: var(--mainBg);
}
.search-list {
    padding: 20px 0px;

    ul {
        overflow: hidden;
        margin: 0 -5px;

        li {
            width: 20%;
            float: left;
            padding: 5px;

            &>div {
                height: 80px;
                border-radius: 6px;
                background-color: #eaf1ff;
                padding: 0 16px;

                .icon {
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    margin-right: 10px;
                    background-image: -moz-linear-gradient(-90deg, rgb(48, 108, 255) 0%, rgb(130, 166, 255) 100%);
                    background-image: -webkit-linear-gradient(-90deg, rgb(48, 108, 255) 0%, rgb(130, 166, 255) 100%);
                    background-image: -ms-linear-gradient(-90deg, rgb(48, 108, 255) 0%, rgb(130, 166, 255) 100%);
                    background-image: linear-gradient(-90deg, rgb(48, 108, 255) 0%, rgb(130, 166, 255) 100%);

                    i {
                        background-repeat: no-repeat;
                        background-position: 0 0;
                    }
                }

                p {
                    font-size: 14px;
                }

                .number {
                    font-family: 'DIN Web';
                    font-size: 24px;
                    color: #333333;
                    font-weight: 700;
                    position: relative;

                    span {
                        position: relative;
                        z-index: 9;
                    }

                    &::after {
                        content: '';
                        width: 100%;
                        height: 5px;
                        position: absolute;
                        bottom: -3px;
                        left: 0;
                        z-index: 0;
                    }
                }

                &.baidu,
                &.sbaidu {
                    .icon {
                        i {
                            width: 24px;
                            height: 27px;
                            background-image: url('@/assets/images/baidu.png');
                        }
                    }

                    .number {
                        &::after {
                            content: '';
                            background: #8fafff;
                        }
                    }
                }

                &.S360,
                &.s360 {
                    background-color: #e4f9ec;

                    .icon {
                        background-image: -moz-linear-gradient(-90deg, rgb(25, 185, 87) 0%, rgb(90, 214, 138) 100%);
                        background-image: -webkit-linear-gradient(-90deg, rgb(25, 185, 87) 0%, rgb(90, 214, 138) 100%);
                        background-image: -ms-linear-gradient(-90deg, rgb(25, 185, 87) 0%, rgb(90, 214, 138) 100%);
                        background-image: linear-gradient(-90deg, rgb(25, 185, 87) 0%, rgb(90, 214, 138) 100%);

                        i {
                            width: 26px;
                            height: 24px;
                            background-image: url('@/assets/images/360.png');
                        }
                    }

                    .number {
                        &::after {
                            content: '';
                            background: #82cc9e;
                        }
                    }
                }

                &.sougou,
                &.ssougou {
                    background-color: #fff2ef;

                    .icon {
                        background-image: -moz-linear-gradient(-90deg, rgb(250, 78, 35) 0%, rgb(255, 137, 108) 100%);
                        background-image: -webkit-linear-gradient(-90deg, rgb(250, 78, 35) 0%, rgb(255, 137, 108) 100%);
                        background-image: -ms-linear-gradient(-90deg, rgb(250, 78, 35) 0%, rgb(255, 137, 108) 100%);
                        background-image: linear-gradient(-90deg, rgb(250, 78, 35) 0%, rgb(255, 137, 108) 100%);

                        i {
                            width: 28px;
                            height: 28px;
                            background-image: url('@/assets/images/sougou.png');
                        }
                    }

                    .number {
                        &::after {
                            content: '';
                            background: #fda894;
                        }
                    }
                }

                &.bing {
                    background-color: #e9f6fc;

                    .icon {
                        background-image: -moz-linear-gradient(-90deg, rgb(27, 171, 238) 0%, rgb(60, 193, 255) 100%);
                        background-image: -webkit-linear-gradient(-90deg, rgb(27, 171, 238) 0%, rgb(60, 193, 255) 100%);
                        background-image: -ms-linear-gradient(-90deg, rgb(27, 171, 238) 0%, rgb(60, 193, 255) 100%);
                        background-image: linear-gradient(-90deg, rgb(27, 171, 238) 0%, rgb(60, 193, 255) 100%);

                        i {
                            width: 22px;
                            height: 28px;
                            background-image: url('@/assets/images/bing.png');
                        }
                    }

                    .number {
                        &::after {
                            content: '';
                            background: #62a2be;
                        }
                    }
                }

                &.shenma {
                    background-color: #fff2e2;

                    .icon {
                        background-image: -moz-linear-gradient(-90deg, rgb(249, 110, 16) 0%, rgb(255, 161, 97) 100%);
                        background-image: -webkit-linear-gradient(-90deg, rgb(249, 110, 16) 0%, rgb(255, 161, 97) 100%);
                        background-image: -ms-linear-gradient(-90deg, rgb(249, 110, 16) 0%, rgb(255, 161, 97) 100%);
                        background-image: linear-gradient(-90deg, rgb(249, 110, 16) 0%, rgb(255, 161, 97) 100%);

                        i {
                            width: 22px;
                            height: 32px;
                            background-image: url('@/assets/images/shengma.png');
                        }
                    }

                    .number {
                        &::after {
                            content: '';
                            background: #ffbe65;
                        }
                    }
                }

                &.toutiao {
                    background-color: #ffeceb;

                    .icon {
                        background-image: -moz-linear-gradient(-90deg, rgb(230, 35, 24) 0%, rgb(245, 103, 95) 100%);
                        background-image: -webkit-linear-gradient(-90deg, rgb(230, 35, 24) 0%, rgb(245, 103, 95) 100%);
                        background-image: -ms-linear-gradient(-90deg, rgb(230, 35, 24) 0%, rgb(245, 103, 95) 100%);
                        background-image: linear-gradient(-90deg, rgb(230, 35, 24) 0%, rgb(245, 103, 95) 100%);

                        i {
                            width: 28px;
                            height: 20px;
                            background-image: url('@/assets/images/toutiao.png');
                        }
                    }

                    .number {
                        &::after {
                            content: '';
                            background: #f69a95;
                        }
                    }
                }
            }

            &.total {
                &>div {
                    background-image: -moz-linear-gradient(0deg, rgb(27, 129, 255) 0%, rgb(101, 152, 255) 100%);
                    background-image: -webkit-linear-gradient(0deg, rgb(27, 129, 255) 0%, rgb(101, 152, 255) 100%);
                    background-image: -ms-linear-gradient(0deg, rgb(27, 129, 255) 0%, rgb(101, 152, 255) 100%);
                    color: #ffffff;
                    font-size: 14px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;

                    span {
                        font-family: 'DIN Web';
                        font-size: 24px;
                        font-weight: 700;
                    }

                    p {
                        margin-top: 5px;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        background: url('@/assets/images/search-data-bg.png') no-repeat 0 0;
                        background-size: cover;
                    }
                }
            }
        }
    }
}
.date-filter {
    margin: 0 16px 0 10px;
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    border-radius: 3px;

    li {
        height: 30px;
        border-top: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        cursor: pointer;
        padding: 0 16px;
        font-size: 14px;
        display: inline-flex;
        align-items: center;

        &.active {
            color: #fff;
            background-color: var(--mainColor);
            border-top: 1px solid var(--mainColor);
            border-bottom: 1px solid var(--mainColor);
            border-radius: 3px;
        }
    }
}
.el-table--default .cell{
    color: var(--text-333-color);
}
.words-tab{
    padding:3px 3px 0 3px;
    p{
        display: flex;
        a{
            height: 41px;
            line-height: 40px;
            padding: 0 14px;
            color: var(--title-color);
            position:relative;
            &.active{
                font-weight: bold;
                color: var(--mainColor);
                background-color: var(--container-bg-color);
                border-radius:3px 3px 0 0;
                &::after{
                    content: "";
                    position: absolute;
                    bottom: 0px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-top: 5px solid var(--mainColor);
                }
            }
            
        }
    }
}